<template>
  <el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL"
             :multiple = true :before-upload="handleBeforeUpload" :limit="8">
    <img v-if="Addfrom.url" :src="Addfrom.url" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
import {client,getFileNameUUID} from "../../api/alioss";

export default {
  data() {
    return {
      fileList: [],
      Addfrom:{
        url:''
      }
    };
  },
  methods: {
    // 上传文件之前
    handleBeforeUpload(file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg';
      const isJPG = file.name.split('.')[1] === 'jpg';
      const isPNG = file.name.split('.')[1] === 'png';
      const isWEBP = file.name.split('.')[1] === 'webp';
      const isGIF = file.name.split('.')[1] === 'gif';
      const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
      if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('单张图片大小不能超过 4mb!');
      }
      return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
    },
    uploadURL(file) {
      //注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
      var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg';
      //定义唯一的文件名，打印出来的uid其实就是时间戳
      client().multipartUpload(fileName, file.file,{
        progress: function(percentage, cpt) {
          console.log('打印进度',percentage)
        }
      }).then((res)=>{
        //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
        this.Addfrom.url = 'https://ghxt-atlbb.oss-cn-zhangjiakou.aliyuncs.com/' + fileName;
        console.log(this.Addfrom.url)
      })
    },

  }
}
</script>
